<!doctype html>
<html>

<head>
	<title>Programmatic Event Triggers</title>
	<script src="../../dist/chart.js"></script>
	<script src="../utils.js"></script>
	<style>
	canvas {
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
	}
	</style>
</head>

<body>
	<div id="container" style="width: 75%;">
		<canvas id="canvas"></canvas>
	</div>
	<button id="hover">Trigger Hover</button>
	<button id="tooltip">Trigger Tooltip</button>
	<script>
		var color = Chart.helpers.color;
		var barChartData = {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
			datasets: [{
				label: 'Dataset 1',
				backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
				borderColor: window.chartColors.red,
				borderWidth: 1,
				hoverBorderWidth: 5,
				hoverBorderColor: 'green',
				data: [
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor()
				]
			}, {
				label: 'Dataset 2',
				backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
				borderColor: window.chartColors.blue,
				borderWidth: 1,
				hoverBorderWidth: 5,
				hoverBorderColor: 'green',
				data: [
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor(),
					randomScalingFactor()
				]
			}]

		};

		window.onload = function() {
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myBar = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				options: {
					responsive: true,
				}
			});

		};

		document.getElementById('hover').addEventListener('click', function() {
			if (window.myBar.getActiveElements().length > 0) {
				window.myBar.setActiveElements([]);
			} else {
				window.myBar.setActiveElements(
					[
						{
							datasetIndex: 0,
							index: 0,
						}, {
							datasetIndex: 1,
							index: 0,
						}
					]);
			}
			window.myBar.update();
		});
		
		document.getElementById('tooltip').addEventListener('click', function() {
			const tooltip = window.myBar.tooltip;
			if (tooltip.getActiveElements().length > 0) {
				tooltip.setActiveElements([], {x: 0, y: 0});
			} else {
				const chartArea = window.myBar.chartArea;
				tooltip.setActiveElements(
					[
						{
							datasetIndex: 0,
							index: 2,
						}, {
							datasetIndex: 1,
							index: 2,
						}
					],
					{
						x: (chartArea.left + chartArea.right) / 2,
						y: (chartArea.top + chartArea.bottom) / 2,
					}
				);
			}

			window.myBar.update();
		});
	</script>
</body>
</html>
